.service {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    margin: 12px;
    background-color: #fff;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .text {
            color: #aaaaaa;
        }

        .btn_btn {
            padding: 10px 0;
            display: flex;
            align-items: center;

        }
    }

    .search {
        display: flex;

        .el-select {
            width: 120px;
        }

        .input-with-select {
            width: 200px;
        }

        .btn-with-select {
            width: 60px;
            background-color: #007cff;
            color: #f5f7fa;
        }

        :deep(.el-form--inline .el-form-item) {
            margin-right: 0px
        }
    }

    .table {
        flex: 1;
        position: relative;
        .btns{
            display: flex;
            justify-content: space-between;
            .bg_color1{
                color: #00c0c0;
                cursor: pointer;
                &:hover{
                    text-decoration: underline;
                }
            }
            .bg_color2{
                cursor: pointer;
                color: #007cff;
                &:hover{
                    text-decoration: underline;
                }
            }
        }
       
    }

    .el-table {
        .link {
            max-width: 600px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;

        }

        .copy {
            max-width: 100px;
            color: #00c0c0;
            cursor: pointer;
        }

        .text {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .open {
                color: #00c0c0;
            }

            .code {
                color: #007cff;
                cursor: pointer;
            }

            .not {
                color: #aaaaaa;
            }
        }
    }

    .mr5 {
        margin-right: 5px;
    }

    .footer {
        padding: 10px 0 0;
        display: flex;
        justify-content: flex-end;
    }
}

:deep(.add-dialog2) {
    .form-text {
        .form-item {
            margin-bottom: 18px;

            .el-radio {
                margin-right: 18px;
            }
        }

        p {
            font-size: 12px;
            color: #999;
        }

        .tips {
            padding-left: 12px;

            .add {
                color: #007cff;
                cursor: pointer;
            }
        }

        .list {
            padding: 0 5px;
            margin: 15px 0;
            max-height: 220px;
            overflow-y: auto;
            height: 100%;

            .text-item {
                margin-bottom: 15px;

                .num {
                    width: 25px;
                    text-align: center;
                    font-size: 12px;
                    margin-right: 12px;
                }

                .text-input {
                    width: 385px;
                }

                .delete {
                    margin-left: 15px;
                    font-size: 12px;
                    color: #f56c6c;
                    cursor: pointer;
                }

                .el-form-item__error {
                    left: 38px;
                }
            }
        }
    }


    .gen-left {
        text-align: center;
        width: 300px;
        padding-top: 50px;
        background-color: #f5f6f7;

        .gen-left-1 {
            justify-content: center;
            align-items: center;
            background-color: white;
            height: 300px;
            width: 250px;
            margin: 0 auto;

            .text-color {
                background-color: #007cff;
            }

            .gen-top {
                font-size: 18px;
                font-weight: bold;
            }
        }

        .gen-btn {
            margin-top: 15px;
            border: none;
            background-color: transparent;
        }
    }

    .gen-right {
        flex: 1;
        // height: 420px;
        margin-left: 20px;

        .qr-edit-title {
            color: #939292;
        }

        .gen-right1 {
            display: flex;
            margin-top: 10px;

            .gen-right-l {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: 10px;

            }

            .gen-span {
                width: 50px;
                height: 50px;
                position: relative;
                margin-left: 10px;
                cursor: pointer;
            }

            .gen-img {
                width: 50px;
                height: 50px;
                position: absolute;
                border-radius: 5px;
                border: 1px solid #ccc;

                .gen-image {
                    width: 40px;
                    height: 20px;
                    position: absolute;
                    margin: 20px 5px;
                }
            }

            .img-icon {
                position: absolute;
                width: 100%;

                .selecticon {
                    padding-left: 34px;

                }

                .selecticon svg {
                    padding-bottom: 7px;
                }
            }

            .img-icon-del {
                display: none;
            }

            .img-icon svg {
                padding-bottom: 7px;
            }

            // 鼠标移入样式
            .gen-span:hover .img-icon-del {
                display: block;
                position: absolute;
                color: #F56C6C;
            }
        }

        .gen-right2 {
            display: flex;

            .gen-right-2 {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 20px;
                margin-left: 10px;


            }

            .gen-label {
                background-image: url('@/assets/image/generate.png');
                background-repeat: no-repeat;
                background-position: center;
                height: 60px;
                width: 50px;
                border: 1px solid #ccc;
            }

            .label2,
            .label3 {
                margin-left: 10px;
            }

            .hd {
                width: 25px;
                height: 5px;
                background: #e5e5e5;
                margin: 6px auto;
            }

            .hd1 {
                width: 25px;
                height: 5px;
                background: #e5e5e5;
                margin: 38px auto;
            }

            .gen-lable-icon {
                margin-left: 35px;
                z-index: 100;
            }

            .gen-lable-icon1 {
                margin-left: 25px;
                z-index: 100;
            }

            .gen-lable-icon svg {
                padding-bottom: 10px;
            }

            .gen-lable-icon1 svg {
                padding-bottom: 20px;
            }


        }

        .el-qrTitle {
            margin-top: 20px;
        }

        .el-qrProgramme {
            margin-left: 10px;
        }

        .el-color {
            margin-top: 20px;
            margin-left: 10px;
        }
    }

    .gen-title {
        font-size: 18px;
        line-height: 50px;
        height: 50px;
    }

    .save-btn {
        display: flex;
        justify-content: end;
        margin-top: 50px;
    }

    .btn_save {
        width: 60px;
    }

    .btn_cancel {
        width: 60px;

        &:hover {
            border: 1px solid #e5e5e5;
            color: #999;
            background-color: #eee;
        }
    }

    .el-upload--picture-card {
        --el-upload-picture-card-size: 50px;
    }


}
.el-tag.el-tag--info {
    --el-tag-border-color: var(--el-color-info-light-9);
}

.el-tag {
    --el-tag-border-color: var(--el-color-primary-light-9);
}

.el-tag.el-tag--warning {
    --el-tag-border-color: var(--el-color-warning-light-9);
}
.el-tag.el-tag--success {
    --el-tag-text-color: #00c0c0;
    --el-tag-bg-color: #ebf6f6;
    --el-tag-border-color: #ebf6f6;
    --el-tag-hover-color: #00c0c0;
}